<template>
  <base-layout>
    <template #header>
      <page-header :collapsed="collapsed" />
    </template>

    <multi-tab />

    <a-layout-content class="content">
      <router-view v-slot="{ Component }" v-if="refresh">
        <transition name="fade-slide" mode="out-in" appear>
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </a-layout-content>
  </base-layout>
</template>

<script lang="ts">
import BaseLayout from "./BaseLayout.vue";
import PageHeader from "./PageHeader.vue";
import { MultiTab } from "@/components";
import { Layout } from "ant-design-vue";
import { SyncOutlined } from "@ant-design/icons-vue";
import { defineComponent, nextTick, provide, ref } from "vue";

export default defineComponent({
  components: {
    SyncOutlined,
    BaseLayout,
    PageHeader,
    ALayout: Layout,
    ALayoutContent: Layout.Content,
    MultiTab,
  },
  props: {
    collapsed: {
      required: true,
      type: Boolean,
    },
  },
  setup() {

    const refresh = ref(true);

    provide("reload", () => {
      refresh.value = false;
      nextTick().then(() => {
        refresh.value = true;
      });
    });

    return {
      refresh,
    };
  },
});
</script>
<style lang="less" scoped>
.content {
  margin: 0 16px;
}
</style>
